<template>
  <view class="container">
  <!-- <CustomNavbar title="忘记密码"/> -->

    <!-- 主内容区 -->
    <view class="content">
      <text class="title">忘记密码？</text>
	 <text class="tip">请修改常记的数字密码</text>
      <!-- 表单区域 -->
      <view class="form">
      <view class="input">
		<text>账号</text>
      	<input
      	  placeholder="请输入账号" 
      	  placeholder-class="placeholder"
		  v-model="formData.username"
      	/>
      </view>
       <view class="input">
       	<text>新密码</text>
       	<input
       	  password 
       	  placeholder="请输入新密码" 
       	  placeholder-class="placeholder"
		  v-model="formData.password"
       	/>
       </view>
		<view class="input">
			<text>确认新密码</text>
        	<input
        	  password 
        	  placeholder="请再次输入新密码" 
        	  placeholder-class="placeholder"
			  v-model="formData.confirmPwd"
        	/>
        </view>
        <button class="login-btn" @click="onSubmit">确定修改</button>
      </view>
    </view>
  </view>
</template>
<script setup>
	import {reactive, ref} from 'vue'
	import CustomNavbar from '@/components/CustomNavbar.vue';
	// 密码
	const formData = reactive({
		username:'',
		old_password:'',
		new_password:''
	})
	const onSubmit = ()=>{
		const postData = formData;
		postData.user_token = uni.getStorageInfoSync('user_token')
		uni.$api.user.login(formData).then(res => {
			if(res.code == 200){
				uni.showToast({
					title: res.msg
				})
				uni.setStorageSync('user_token', res.data.user_token)
				setTimeout(function(){
					uni.switchTab({
						url:'/pages/index/index'
					})
				},1000)
			}
		})
		
	}
</script>
<style scoped lang="scss">
.container {
  width: 100%;
  height: 100vh;
  background: linear-gradient(0deg, #F3F6FA, #FF413B);
  background-size: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  // height: calc(100vh - 88rpx);
  // padding-top: 28rpx;
  color: #ffffff;
}



.content {
  box-sizing: border-box;
  flex: 1;
  padding:180rpx 60rpx;
  display: flex;
  flex-direction: column;
 
}

.title {
  font-size: 46rpx;
  font-weight: bold;
  
  text-align: left;
}
.tip{
	margin-bottom: 116rpx;
	margin-top: 36rpx;
	font-size: 36rpx;
	font-weight: normal;
}
.welcome {
  font-size: 28rpx;
  color: #999;
  margin-bottom: 80rpx;
}

.form {
  width: 100%;
  image{
	  width: 25rpx;
	  margin: 0 18rpx 0 26rpx;
  }
}

.input {
  width: 100%;
  box-sizing: border-box;
  height: 94rpx;
  margin-bottom: 40rpx;
  font-size: 28rpx;
  background-color: #F7F7F7;
  border-radius: 26rpx;
  display: flex;
  align-items: center;
  color: #000;
  .placeholder{
	  color: #999;
  }
  text{
	  display: inline-block;
	  width: 205rpx;
	  color: #222222;
	  padding-left: 30rpx;
	  box-sizing: border-box;
  }
}

.forget-pwd {
	color: #fff;
	text-align: right;
	margin-top: 45rpx;
	margin-bottom: 217rpx;
	.lien-text{
		font-size: 28rpx;
		color: #fff;
	}
}

.login-btn {
  width: 620rpx;
  height: 98rpx;
  background: linear-gradient(to right,#FF5A55,#FD3832);
  color: white;
  font-size: 36rpx;
  border-radius:10rpx;
  line-height: 98rpx;
  border:none;
}




.agreement {
  margin-top: 50rpx;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 24rpx;
  color: #666;
  image{
	  width: 26rpx;
	  margin-right: 15rpx;
	  margin-left: 10rpx;
  }
  .link-text {
	  position: relative;
	  color: #0090FF;
		text-decoration: underline;
    // margin-left: 8rpx;
  }
}
.tipInfo{
	color: #FD3832;
	font-size: 26rpx;
	padding-top: 20rpx;
	padding-left: 20rpx;
}
</style>